﻿@{
    ViewBag.Title = "DOMInserted";
}

<h2>Dynamically DOM inserts</h2>
<p>
    Press buttons to insert a new image element to the DOM:
</p>

<div id="ImagesPlaceholder" style="width:100%"></div>
<br />
<script language="javascript">
    function addImage(name) {
        var sampleImage = document.createElement("img");
        sampleImage.src = '@Url.Content("~/Content/images/")' + name;
        sampleImage.style = "width: 100%";

        var imagesPlaceholder = document.getElementById("ImagesPlaceholder");
        imagesPlaceholder.appendChild(sampleImage);
    }
</script>
<input id="CirclesButton" type="button" value="Add Circles" onclick="addImage('Circles.png')" />
<input id="PentagonsButton" type="button" value="Add Pentagons" onclick="addImage('Pentagons.png')" />
<input id="RectanglesButton" type="button" value="Add Rectangles" onclick="addImage('Rectangles.png')" />
